<template>
	<view class="p-3">
		<view class="">
			<view class="card bg-white rounded-lg p-2 flex align-center justify-between mb-3"
				v-for="(item,index) in list" :key="index" @click="clickCheck(index)">
				<view class="flex align-center">
					<image src="../../../static/img/ic_default_head.png" style="width:100rpx;height: 100rpx;" mode="">
					</image>
					<view class="ml-2">
						<view class="mb-1">{{item.user_name}}</view>
						<view class="mb-1">班级名称：{{item.class_bjname}}</view>
						<view class="">IMEI：{{item.imei}}</view>
					</view>
				</view>
				<view class="">
					<image src="../../../static/img/ic_unxuanzhong.png" style="width: 50rpx;height: 50rpx;"
						v-if="!item.flag">
					</image>
					<image src="../../../static/img/ic_xuanzhong.png" style="width: 50rpx;height: 50rpx;" v-else>
					</image>
				</view>
			</view>
		</view>
		<view class="fixed-bottom mb-3 px-5 flex justify-between">
			<view class="flex rounded-circle bg-main colorfff align-center  justify-center px-4 py-1 font30"
				style="margin:0 auto;height: 60rpx;width: 200rpx;" @click="delDevice">
				解除绑定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				del: null
			}
		},
		onLoad() {
			this.list = uni.getStorageSync('userInfo').class_info;
			this.list.map((item) => {
				item.flag = false
			})
			this.getData()
		},
		methods: {
			getData() {
				let this_ = this;
				let opts = {
					url: 'device/devicelist?userid=' + uni.getStorageSync('userInfo').userId + '&authToken=' + uni
						.getStorageSync('userInfo').token
				};
				let param = {
					userid: uni.getStorageSync('userInfo').userId,
					authToken: uni.getStorageSync('userInfo').token
				};
				this_.$http.httpDeveiceRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.ReturnMsg == "success") {
							let arr = uni.getStorageSync('userInfo').class_info;
							let devicelist = res.data.ReturnData.devicesList;
							console.log(devicelist)
							console.log(arr)
							for (var i = 0; i < devicelist.length; i++) {
								for (var k = 0; k < arr.length; k++) {
									if (devicelist[i].serialNo == arr[k].imei) {
										console.log('init')
										arr[k].deviceId = devicelist[i].deviceId
									}

								}
							}
							this_.list = arr;
							console.log(arr)
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			clickCheck(index) {
				let arr = uni.getStorageSync('userInfo').class_info;
				if (this.list[index].flag == "0") {
					arr.map((item, i) => {
						console.log(item, i)
						if (i == index) {
							item.flag = true;
							this.del = index
						} else {
							item.flag = false;
						}
					})
				} else {
					this.del = null
					arr.map((item, i) => {
						item.flag = false;
					})
				}
				this.list = arr
			},
			delDevice() {
				let this_ = this;
				if (this_.del != null) {
					let opts = {
						url: 'unbind.shtml'
					};
					let param = {
						jzId: uni.getStorageSync('userInfo').user_id,
						userId: uni.getStorageSync('userInfo').userId,
						user_id: this_.list[this_.del].user_id,
						authToken: uni.getStorageSync('userInfo').token
					};
					this_.$http.httpTokenRequest(opts, param).then(
						res => {
							console.log(res.data);
							if (res.data.code == '200') {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								});
								this_.getData();
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								});
							}
						},
						error => {
							console.log(error);
						}
					);
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
